<template>
  <div class="login-container">
    <div class="dialog">
      <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
        <el-form-item label="用户名">
          <el-input v-model="formLabelAlign.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="formLabelAlign.password" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" style="width: 25%;" @click="$router.push('/reg')">去 注 册</el-button>
          <el-button type="primary" style="width: 70%;" @click="onSubmit">登 录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { postLogin } from "../api/login/index";
export default {
  data() {
    return {
      labelPosition: 'left',
      formLabelAlign: {
        username: '',
        password: '',
      }
    };
  },
  methods: {
    onSubmit() {
      postLogin(this.formLabelAlign).then( (res) => {
        // console.log(res.data);
        if(res.data.code == 20000) {
          if(res.data.data.auth == 0) {
            if(res.data.data.status == 0) {
              this.$message.success('登陆成功')
              localStorage.setItem('username',res.data.data.username)
              this.$router.push('/home')
            }else {
              this.$message.error('账号已被冻结')
              return
            }
          }
          else if(res.data.data.auth == 1) {
            localStorage.setItem('username',res.data.data.adminname)
            localStorage.setItem('token',res.data.data.token)
            this.$router.push('/admin')
          }
        }
        if(res.data.code == 50000) {
          this.$message.error('用户名或密码错误')
        }
      })
    },
    init() {
      this.formLabelAlign.username = localStorage.getItem('username')
    }
  },
  created() {
    this.init()
  }
}
</script>

<style scoped>
.dialog {
  width: 400px;
  height: 500px;
  position: absolute;
  left: 50%;
  transform: translateX(-200px);
  top: 15%;
  /* background-color: rgba(255,255,255,.1); */
  backdrop-filter: blur(100px);
  padding: 15px;
  border-radius: 5px;
  font-size: 17px;
}
.el-input__inner{
  background-color: rgba(5, 5, 5, .3) !important;
  color: aliceblue !important;
  border: rgba(5, 5, 5, .3) !important;
  /* background-color: #4d4d34 !important; */
    
}
.el-form-item {
  margin-top: 80px;
}
.el-form-item__label {
  color: aliceblue !important;
  font-size: 17px;
}
</style>